本节主要讲头部 + 页面布局，讲解添加头部标题栏基础功能。
# 头部 + 页面布局
从实战开发开始的两个页面都没有添加头部标题栏，只是把标题栏进行了取消。在项目的根目录下的 pages.json 文件，设置 app-plus 的 titleNView 为 false 即可；
/* pages.json */
{
"path": "pages/mine/index",
"style": {
"navigationBarTitleText": "我的",
"app-plus":{
"titleNView": false
}
}
},
视频页实际头部效果：
这个页面的标题栏开发会相对容易一些，因此拿到这里来讲开发导航栏。
由于 h5 是运行在浏览器中的，我们并不能对标题栏进行样式设置，故在差异化下，H5 没有应用头部。但是在 app 我们是可以设置标题栏的，新版的小程序也开始支持标题栏的设置。我们的 Uniapp 项目并不是操作原生 app 组件，因此标题栏的设置可以说是 webview 的一个样式模拟。取消标题栏的是以手机状态栏（电池栏）开始自上而下排版的，这一块我们也要隔开。
看到开头的大图，图片上画的两个很明显的边框分为两块，头部与内容区。要想更接近 app 的原生效果，就要看页面的组成。我们在写页面的时候可以把导航栏固定，然后内容区用 scroll-view 组件撑开整个页面：
<view>
<view class="navbar">
<!-- 这里是标题栏 -->
</view>
<scroll-view scroll-y="true" class="page-content">
这里是内容区
</scroll-view>
</view>
.navbar{
position: fixed;
top:0;
width:100%;
height:44px;
}
.page-content {
position: fixed;
top: 44px; // 距离标题栏高度
left: 0;
right: 0;
bottom: 0px;
}
这样就可以实现基本的页面布局，内容区铺满整个页面（除标题栏外和底部导航）。
在这里我们可以使用 Uniapp 官方的扩展组件 NavBar 导航栏。可以友好的处理左右边的事件，甚至可以以插槽的方式自定义功能复杂的标题栏。因此可以改造代码：
<view>
<!-- #ifdef APP-PLUS || MP-WEIXIN -->
<uni-nav-bar fixed :status-bar="true" title="我的音乐" @clickLeft="goCloud" @clickRight="goCloud">
<block slot="left"><image class="top-img left" src="/static/image/mine/l.png"></image></block>
<!-- #ifdef APP-PLUS -->
<block slot="right"><image class="top-img" src="/static/image/mine/r.png"></image></block>
<!-- #endif -->
</uni-nav-bar>
<!-- #endif -->
<!-- #ifdef APP-PLUS || MP-WEIXIN -->
<scroll-view scroll-y="true" class="page-content">
<!-- #endif -->
这里是内容区
<!-- #ifdef APP-PLUS || MP-WEIXIN -->
</scroll-view>
<!-- #endif -->
</view>
固定导航栏在 uni-nav-bar 组件中添加 fixed，添加 :status-bar="true" 适配状态栏的高度下渲染，并添加左右触发事件回调。由于这一块仅在 app 中需要设置标题栏，因此代码进行了条件编译 <!-- #ifdef APP-PLUS -->。
添加完头部标题栏的 APP 页面效果图：
添加完头部标题栏的微信小程序页面效果图：
小程序的载体是运营方 app，会有运营方的设计差异在。因此在设计整个项目之初，哪些功能是否适用的，是否可以在这个端使用的，都要做出评估。功能设计上也要有所取舍。如果产品经理设计一个功能需要在 H5 中调用用户的通讯录，就算程序员再优秀或者框架再实用，H5 也是做不到的调用通讯录的。开发之前要考虑他们所提供的 API 和性能能否满足产品需求。
